<template>
    <div class='wrap'>
      <div class="win-main" :class="winClass">
        <div id="btn_h" @click='lottery'></div>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      winClass: ''
    }
  },
  methods: {
    restart () {
      this.$router.push('/mode')
    },
    lottery () {
      this.$router.push('/lottery/2')
    },
    randomBy () {
      let index = Math.floor(Math.random() * 3)
      this.winClass = 'winClass' + index
    }
  },
  beforeCreate () {
    this.GLOBAL.validate()
  },
  mounted: function () {
    document.getElementsByTagName('body')[0].className = 'bgimg'
    this.randomBy()
    // 添加返回事件监听
    let that = this
    history.pushState(null, null, '')
    window.onpopstate = function (event) {
      that.$router.push({path: '/mode'})
    }
  },
  beforeDestroy: function () {
    document.body.removeAttribute('class', 'bgimg')
  }
}
</script>

<style>
.bgimg {
  background:url('../assets/home/bg.png') no-repeat;
  background-size:cover;
}
.wrap {
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
}
.win-main {
  display: flex;
  min-height: 36rem;
  min-width: 20.5rem;
  flex-direction: column-reverse;
  align-items: center;
}
.winClass0 {
    background:url('../assets/win/bg_22.png') no-repeat;
    background-size:20.5rem;
}
.winClass1 {
    background:url('../assets/win/bg_22.png') no-repeat;
    background-size:20.5rem;
}
.winClass2 {
    background:url('../assets/win/bg_22.png') no-repeat;
    background-size:20.5rem;
}
.win-main #btn_h {
  height: 3.5rem;
  width: 12rem;
  background:url('../assets/win/btn_18.png') no-repeat;
  background-size:12rem 3.5rem;
  margin-bottom: 5rem;
}
</style>
